<template>
  <view class="filter-page">
    <!-- 顶部导航栏 -->
    <view class="top-bar">
      <text class="nav-btn cancel" @click="back">取消</text>
      <text class="nav-title">添加求职期望</text>
      <text class="nav-btn confirm" @click="submitCareerExpectInfo">添加</text>
    </view>

    <!-- 主体内容区（左右布局） -->
    <view class="content-container">
      <!-- 左侧筛选列表 -->
      <view class="left-panel">
        <view 
          v-for="(item, index) in filterItems" 
          :key="index"
          class="filter-item" 
          :class="{ 
            'required': item.required, 
            'selected': currentTab === index 
          }"
          @click="switchTab(index)">
          <text class="item-label">{{ item.label }}</text>
        </view>
      </view>

      <!-- 右侧内容区（动态切换） -->
      <view class="right-panel">
        <!-- 公司行业选择（单选） -->
        <template v-if="currentTab === 0">
          <radio-group @change="handleIndustryChange">
            <label class="option-item" v-for="(option, i) in industryOptions" :key="i">
              <radio 
                :value="String(option.industryId)" 
                :checked="careerExpectInfo.industryId === option.industryId" 
              />
              <text>{{ option.industryName }}</text>
            </label>
          </radio-group>
        </template>

        <!-- 职位类型选择（单选） -->
        <template v-else-if="currentTab === 1">
          <radio-group @change="handlePositionTypeChange">
            <label class="option-item" v-for="(option, i) in positionTypeOptions" :key="i">
              <radio 
                :value="String(option.typeId)" 
                :checked="careerExpectInfo.jobTypeId === option.typeId" 
              />
              <text>{{ option.typeName }}</text>
            </label>
          </radio-group>
        </template>

        <!-- 职位选择（单选） -->
        <template v-else-if="currentTab === 2">
          <view v-if="careerExpectInfo.jobTypeId">
            <radio-group @change="handlePositionChange">
              <label class="option-item" v-for="(option, i) in positionOptions" :key="i">
                <radio 
                  :value="String(option.jobId)" 
                  :checked="careerExpectInfo.jobId === option.jobId" 
                />
                <text>{{ option.jobName }}</text>
              </label>
            </radio-group>
          </view>
          <view v-else class="hint-message">
            <text>请先选择职位类型</text>
          </view>
        </template>

        <!-- 薪资范围 -->
        <template v-else-if="currentTab === 3">
          <view class="salary-range-container">
            <view class="salary-input-group" :class="{ 'error': isSalaryInvalid }">
              <input 
                type="number" 
                class="salary-input" 
                placeholder="最低薪资" 
                v-model="careerExpectInfo.startSalary"
                @input="validateSalary"
              />
              <text class="unit">元/月</text>
            </view>
            <view class="salary-input-group" :class="{ 'error': isSalaryInvalid }">
              <input 
                type="number" 
                class="salary-input" 
                placeholder="最高薪资" 
                v-model="careerExpectInfo.maxSalary"
                @input="validateSalary"
              />
              <text class="unit">元/月</text>
            </view>
            <text v-if="isSalaryInvalid" class="error-message">最低薪资不能高于最高薪资</text>
          </view>
        </template>

        <!-- 工资形式选择（单选） -->
        <template v-else-if="currentTab === 4">
          <radio-group @change="handlePayMethodChange">
            <label class="option-item" v-for="(option, i) in paymentTypeOptions" :key="i">
              <radio 
                :value="option.value" 
                :checked="careerExpectInfo.payMethod === Number(option.value)" 
              />
              <text>{{ option.label }}</text>
            </label>
          </radio-group>
        </template>
      </view>
    </view>
  </view>
</template>

<script>
import state from '../../store/state';
import {getPositionTypeAndFirst, getJobsByTypeId,addCareerExpect} from '@/api/user.js'

export default {
  data() {
    return {
      currentTab: 0,
      nowJobTypeId: null,
      isSalaryInvalid: false,
      filterItems: [
        { label: '公司行业:', required: false },
        { label: '职位类型:', required: false },
        { label: '职位:', required: false },
        { label: '薪资范围(月):', required: true },
        { label: '工资形式:', required: false },
      ],
      industryOptions: [],
      positionTypeOptions: [],
      positionOptions: [],
      paymentTypeOptions: [
        { value: '2', label: '月薪' },
        { value: '1', label: '周薪' },
        { value: '0', label: '日薪' },
        { value: '3', label: '时薪' },
        { value: '4', label: '面议' }
      ],
      careerExpectInfo: {
		  userId:null,
        industryId: null,
        jobTypeId: null,
        jobId: null,
        startSalary: null,
        maxSalary: null,
        payMethod: null,
      }
    }
  },
  onLoad() {
    getPositionTypeAndFirst().then(res => {
      this.positionTypeOptions = res.data.jobTypeDOS;
      this.industryOptions = res.data.industryDOS;
    });
  },
  methods: {
    switchTab(index) {
      this.currentTab = index;
      if(index === 2) {
        this.loadPositionOptions();
      }
    },
    
    // 公司行业选择（单选）
    handleIndustryChange(e) {
      this.careerExpectInfo.industryId = Number(e.detail.value);
    },
    
    // 职位类型选择（单选）
    handlePositionTypeChange(e) {
      this.careerExpectInfo.jobTypeId = Number(e.detail.value);
      this.careerExpectInfo.jobId = null;
      if(this.currentTab === 2) {
        this.loadPositionOptions();
      }
    },
    
    // 职位选择（单选）
    handlePositionChange(e) {
      this.careerExpectInfo.jobId = Number(e.detail.value);
    },
    
    // 工资形式选择（单选）
    handlePayMethodChange(e) {
      this.careerExpectInfo.payMethod = Number(e.detail.value);
    },
    
    loadPositionOptions() {
      if(this.careerExpectInfo.jobTypeId && this.nowJobTypeId !== this.careerExpectInfo.jobTypeId) {
        getJobsByTypeId({jobTypeId: this.careerExpectInfo.jobTypeId}).then(res => {
          this.positionOptions = res.data;
          this.nowJobTypeId = this.careerExpectInfo.jobTypeId;
        });
      }
    },
    
    validateSalary() {
      const { startSalary, maxSalary } = this.careerExpectInfo;
      this.isSalaryInvalid = startSalary && maxSalary && +startSalary > +maxSalary;
      if (this.isSalaryInvalid) {
        uni.showToast({ title: '最低薪资不能高于最高薪资', icon: 'none' });
      }
    },
    
    submitCareerExpectInfo() {
      if (this.isSalaryInvalid) {
        uni.showToast({ title: '请修正薪资范围', icon: 'none' });
        return;
      }
	  this.careerExpectInfo.userId = state.userInfo.userId
	  addCareerExpect(this.careerExpectInfo).then(res=>{
		  if(res.code == 200){
			  uni.reLaunch({
			    url: '/pages/zcy/main'
			  });
		  }
	  }).catch(e=>{
		  uni.showToast({ title: '添加失败', icon: 'error' });
	  })
    },
    
    back() {
      uni.navigateBack();
    }
  }
}
</script>

<style scoped>
/* 样式保持不变 */
.filter-page {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background-color: #fff;
}

.top-bar {
  height: 88rpx;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 32rpx;
  border-bottom: 1px solid #eee;
}

.nav-btn {
  font-size: 28rpx;
  color: #007aff;
}

.nav-title {
  font-size: 32rpx;
  font-weight: bold;
}

.content-container {
  display: flex;
  flex: 1;
  overflow: hidden;
}

.left-panel {
  width: 300rpx;
  border-right: 1px solid #eee;
  padding: 20rpx;
}

.filter-item {
  margin-bottom: 24rpx;
  font-size: 28rpx;
  line-height: 44rpx;
  padding: 8rpx 12rpx;
  border-radius: 8rpx;
  transition: background-color 0.3s;
}

.filter-item:active {
  background-color: #f9f9f9;
}

.filter-item.required .item-label::before {
  content: "*";
  color: red;
  margin-right: 4rpx;
}

.filter-item.selected {
  background-color: #f5f5f5;
  font-weight: bold;
}

.item-label {
  color: #666;
}

.filter-item.selected .item-label {
  color: #333;
}

.right-panel {
  flex: 1;
  padding: 20rpx 32rpx;
  background-color: #f9f9f9;
  overflow-y: auto;
}

.option-item {
  display: flex;
  align-items: center;
  margin-bottom: 28rpx;
  padding: 16rpx 0;
  font-size: 28rpx;
}

.hint-message {
  padding: 20rpx;
  color: #999;
  font-size: 28rpx;
  text-align: center;
}

.salary-range-container {
  margin-top: 20rpx;
}

.salary-input-group {
  display: flex;
  align-items: center;
  margin-bottom: 20rpx;
  padding: 20rpx;
  background-color: #fff;
  border-radius: 8rpx;
  border: 1rpx solid #eee;
}

.salary-input-group.error {
  border-color: #ff4d4f;
}

.salary-input {
  flex: 1;
  height: 40rpx;
  font-size: 28rpx;
  color: #333;
}

.unit {
  font-size: 24rpx;
  color: #999;
  margin-left: 10rpx;
}

.error-message {
  color: #ff4d4f;
  font-size: 24rpx;
  margin-top: 10rpx;
}

radio, checkbox {
  margin-right: 16rpx;
  transform: scale(0.9);
}
</style>